<template>
  <span>repeat12份平分</span>
  <div class="grid-1">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-1">4</div>
    <div class="grid-item grid-item-2">5</div>
    <div class="grid-item grid-item-3">6</div>
    <div class="grid-item grid-item-1">7</div>
    <div class="grid-item grid-item-2">8</div>
    <div class="grid-item grid-item-3">9</div>
    <div class="grid-item grid-item-1">10</div>
    <div class="grid-item grid-item-2">11</div>
    <div class="grid-item grid-item-3">12</div>
    <div class="grid-item grid-item-1">13</div>
  </div>
  <span>repeat可以在任意位置</span>
  <div class="grid-2">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
  </div>
  <span>repeat(auto-fill, 50px) 根据屏幕自动计算出网格</span>
  <div class="grid-3">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
  </div>
</template>
<style lang="scss" scoped>
.grid-1 {
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 50px;
}

.grid-2 {
  width: 400px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 20px repeat(2, 1fr) 50px;
  grid-auto-rows: 50px;
}
.grid-3 {
  width: 300px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-template-rows: 50px;
}
</style>
